<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="query">
        <span class="state">
          <img src="/@/assets/images/table.png" alt="" />
          T+1租金计划表
        </span>
        <a-form layout="inline" class="query-form" :model="queryForm">
          <a-form-item>
            <a-input style="width: 170rem" v-model="queryForm.a" placeholder="输入方案名称" />
          </a-form-item>
          <a-form-item>
            <a-input style="width: 170rem" v-model="queryForm.b" placeholder="请输入承租人姓名" />
          </a-form-item>
          <a-form-item>
            <a-select style="width: 170rem" v-model="queryForm.c" placeholder="请选择签约状态">
              <a-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-range-picker v-model:value="queryForm.d" format="YYYY/MM/DD" />
          </a-form-item>
          <a-form-item>
            <a-button class="submit" type="primary" @click="onSubmit">查询</a-button>
            <a-button class="cancel">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-table
        :pagination="false"
        :dataSource="dataSource"
        :columns="columns"
        :rowClassName="(record, index) => (index % 2 === 1 ? 'yhx' : null)"
        :scroll="{ y: '68vh' }"
      >
        <template #f="{ record }">
          <div>
            <a-tag color="green">已核销</a-tag>
            <a-tag color="blue">部分核销</a-tag>
            <a-tag color="red">未核销</a-tag>
          </div>
        </template>
      </a-table>
      <a-pagination class="pager" :total="50" show-size-changer show-quick-jumper />
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  import ThePagination from '/@/components/system/the-pagination/index.vue';
  const queryForm = ref({ a: '', b: '', c: '', d: '' });
  const dataSource = ref([
    
  ]);
  const columns = ref([
    {
      title: '租金期数',
      key: 'index',
      dataIndex: 'index',
    },
    {
      title: '租赁本金（元）',
      key: 'a',
      dataIndex: 'a',
    },
    {
      title: '租赁利率（固定利率）（%）',
      key: 'b',
      dataIndex: 'b',
    },

    {
      title: '租赁利息（元）',
      key: 'c',
      dataIndex: 'c',
    },
    {
      title: '租金总额（元）',
      key: 'd',
      dataIndex: 'd',
    },
    {
      title: '支付日期',
      key: 'e',
      dataIndex: 'e',
    },
    {
      title: '核销状态',
      key: 'f',
      dataIndex: 'f',
      slots: { customRender: 'f' },
    },

    {
      title: '剩余应收',
      key: 'g',
      dataIndex: 'g',
    },
  ]);
</script>
<style scoped lang="less">
  @import '../rzApply/index.less';

  .query {
    width: 100%;
    display: flex;
    margin: 0 0 24rem;
    box-sizing: border-box;
    .state {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 22rem;
      color: #1169e5;
      margin-right: 200rem;
      img {
        width: 20rem;
        height: 19rem;
        margin-right: 14rem;
      }
    }
    .form {
      float: 1;
      display: flex;
    }
    .submit {
      background-color: #fc5451 !important;
    }
  }
</style>
